<template>
  <div class="questions-from">
    <el-form ref="form" :model="form" label-width="80px" size="small">
      <el-row type="flex" align="center">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="form.subjectID" placeholder="请选择" style="width:100%" @change="hChange">
              <el-option :label="item.subjectName" :value="item.id" v-for="item in subjectList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
             <el-select v-model="form.catalogID" placeholder="请选择" style="width:100%">
               <el-option  :label="item.label" :value="item.value" v-for="item in directoryList" :key="item.value"></el-option>
             </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="标签">
             <el-select v-model="form.tags" placeholder="请选择" style="width:100%">
               <el-option v-for="item in tagList" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
         </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" >
            <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
       <el-row type="flex" align="center">
        <el-col :span="6">
          <el-form-item label="试题类型" >
            <el-select v-model="form.questionType" placeholder="请选择" style="width:100%">
              <el-option label="单选" :value=1></el-option>
              <el-option label="多选" :value=2></el-option>
              <el-option label="简答" :value=3></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择" style="width:100%">
              <el-option label="简单" :value=1></el-option>
              <el-option label="一般" :value=2></el-option>
              <el-option label="困难" :value=3></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
           <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择" style="width:100%">
              <el-option :label="item" :value="item" v-for="item in direction" :key="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" >
            <el-select v-model="form.creatorID" placeholder="请选择" style="width:100%">
              <el-option :label="item.username" :value="item.id" v-for="item in userList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
       <el-row align="center" type="flex">
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-row justify="space-between" type="flex" :gutter="5">
              <el-col :span="11.5">
                <el-select v-model="form.province" placeholder="请选择" style="width:100%" @change="changeCity">
                  <el-option :label="item" :value="item" v-for="item in cityList" :key="item" ></el-option>
                </el-select>
              </el-col>
              <el-col :span="11.5">
                <el-select v-model="form.city" placeholder="请选择" style="width:100%">
                  <el-option :label="item" :value="item" v-for="item in areaList" :key="item"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row justify="end" align="center" type="flex">
            <el-button size="small" @click="resetForm">清除</el-button>
            <el-button size="small" type="primary" @click="submit">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { simple } from '@/api/hmmm/tags.js'
import * as directorys from '@/api/hmmm/directorys.js'
import * as user from '@/api/base/users.js'
import * as citys from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'

export default {
  name: 'HmmmQuestionsForm',

  data () {
    return {
      subjectList: [],
      tagList: [],
      directoryList: [],
      userList: [],
      direction: [],
      cityList: [],
      areaList: [],
      form: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
    }
  },

  mounted () {

  },
  created () {
    this.loadList()
    this.loadUserList()
    this.loadCitys()
    this.direction = direction
  },
  methods: {
    async loadUserList () {
      try {
        const res = await user.list()
        console.log(res, 'user')
        this.userList = res.data.list
      } catch (error) {

      }
    },
    async loadList () {
      try {
        const res = await list({ page: 1, pagesize: 100 })
        // console.log(res, 'subject')
        if (res.status !== 200) return this.$message.error('获取失败')
        this.subjectList = res.data.items
        console.log(res, 'subject')
      } catch (error) {
        console.log(error)
      }
    },
    loadCitys () {
      this.cityList = citys.provinces()
    },
    async loadSubjectDetail () {
      const tags = await simple({ subjectID: this.form.subjectID })
      console.log(directorys)
      const directory = await directorys.simple({ subjectID: this.form.subjectID })
      console.log(tags, directory)
      this.tagList = tags.data
      this.directoryList = directory.data
    },
    hChange () {
      this.form.catalogID = ''
      this.form.tags = ''
      this.loadSubjectDetail()
    },
    changeCity () {
      this.form.city = ''
      // console.log(citys.citys(this.form.province))
      this.areaList = citys.citys(this.form.province)
    },
    resetForm () {
      this.form = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
      this.tagList = []
      this.directoryList = []
    },
    submit () {
      const search = {}
      Object.keys(this.form).forEach(key => {
        if (this.form[key]) {
          search[key] = this.form[key]
        }
      })
      this.$emit('search', search)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
